

<template>
  <main ref="main" class="w-full overflow-hidden text-white ">
    <section class="panel gradient-blue flex flex-col justify-center items-center min-h-screen overflow-hidden">
      <h1>TOP!</h1>
    </section>
    <section class="panel gradient-box flex flex-col justify-center items-center min-h-screen  overflow-hidden">
      <h1>CENTER!</h1>
    </section>
    <section class="panel  gradient-orange  flex flex-col justify-center items-center min-h-screen overflow-hidden">
      <h1>BOTTOM!</h1>
    </section>
  </main>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const main = ref();
const ctx=ref();

onMounted(() => {
  ctx.value = gsap.context(() => {
    const panels = gsap.utils.toArray('.panel');
    panels.forEach((panel) => {
      gsap.fromTo(panel,{
        backgroundPositionY: `-${window.innerHeight/2}px`,
      },{
        backgroundPositionY: `${window.innerHeight/2}px`,
        duration: 3,
        ease: 'none',
        scrollTrigger: {
          trigger: panel,
          scrub: true,
        },
      });
    });
  });
});

onUnmounted(() => {
  ctx.value.revert(); 
});
</script>

<style lang="less" scoped>
.panel{

}
.gradient-blue{
  background-image: url('https://img0.baidu.com/it/u=1948419241,1108190265&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');
  background-repeat: no-repeat;
  background-size: cover;
}
.gradient-box{
  background-image: url('https://img0.baidu.com/it/u=3217812679,2585737758&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');
  background-repeat: no-repeat;
  background-size: cover;
}
.gradient-orange{
  background-image: url('https://img0.baidu.com/it/u=2272183402,481750275&fm=253&app=138&f=JPEG?w=889&h=500');
  background-repeat: no-repeat;
  background-size: cover;
}
.box{
  width: 75px;
  height: 75px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #0ae448;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  will-change: transform;
}
</style>

